<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>积分商城</title>
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/weui.css" />
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/goods.css" />
</head>
<style type="text/css">
    body {
        background: #F8F8F8;
        line-height: normal;
    }
    .weui-media-box__thumb {
        width: 100%;
        height: 100%;
    }
    .weui-navbar__item.weui-bar__item_on {
        background: #fff;
        color: #FD807A;
    }
    .text-right {
        text-align: right;
        color: #FF8079;
    }
    .weui-navba {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        position: fixed;
        z-index: 500;
        bottom: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0px -3px 3px #eee;
    }
    .weui-tab__panel {
        margin-bottom: 50px;
    }
    .weui-tab__panel dl {
        border-radius: 10px;
        width: 44%;
        float: left;
        margin-top: 15px;
        background: #fff;
        box-shadow: -1px -1px 1px #EBEBEB,1px 1px 1px #EBEBEB,1px -1px 1px #EBEBEB,-1px 1px 1px #EBEBEB;
    }
    .weui-tab__panel dl:nth-child(2n) {
        margin-right: 4%;
    }
    .weui-tab__panel dl:nth-child(2n+1) {
        margin-left: 4%;
        margin-right: 4%;
    }
    .weui-tab__panel dl dt img {
        width: 100%;
        height: 100%;
    }
    .jifen {
        color: #F9827C;
    }
    .weui-tab__panel dl dd {
        padding: 10px;
    }
    .weui-tab__panel dl dd p:nth-child(1) {
        font-size: 14px;
    }
    .weui-tab__panel dl dd p:nth-child(2) {
        font-size: 12px;
    }
    .weui-media-box_appmsg .weui-media-box__hd{
        width: 35px;
        height: 35px;
    }
    .weui-media-box__title{
        font-size: 14px;
    }
    .jifen{
        font-size: 12px;
    }
    .weui-media-box{
        padding: 10px 15px;
    }
    .weui-media-box_appmsg .flex2{
        -webkit-box-flex: 2;
        -webkit-flex: 2;
        flex: 2;
    }
    .list-box {
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        margin: 4%;
    }
    .box {
        width: 48%;
        height: 1%;
        margin: 0 0 15px;
        border-radius: 6px;
        background: #fff;
        box-shadow: 0px 0px 30px rgba(69, 101, 173, 0.1);
        overflow: hidden;
    }
    .box .pic-box {
        position: relative;
        width: 100%;
        height: 150px;
        overflow: hidden;
    }
    .box .pic-box img {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        border-radius: 4px 4px 0 0;
    }
    .box .pic-box .card-logo {
        background: #fff;
        border: 2px solid #ffffff;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        position: relative;
        float: right;
        right: 15px;
        top: 10px;
        margin: 0;
    }
    .card-box {
        position: relative;
        top: 50px;
        left: 15px;
        color: #fff;
    }
    .card-title {
        font-size: 20px;
    }
    .card-m {
        font-size: 32px;
        position: relative;
        top: 2px;
        font-weight: normal;
    }
    .card-info {
        font-size: 13px;
        margin-top: 5px;
    }
    .box .box-text {
        padding: 8px 9px;
    }
    .box .box-text .box-title {
        width: 100%;
        line-height: 14px;
        color: #555;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 14px;
        margin-top: 5px;
    }
    .box .box-text .box-title-name {
        font-size: 12px;
        color: #999;
        margin-top: 0;
    }
    .box .box-title .detail-integral {
        color: #f74848;
    }
</style>
<body>
<div class="container" id="container">
    <div class="page navbar js_show">
        <div class="page__bd" style="height: 100%;">
            <div class="weui-tab">
                <div class="weui-tab__panel">
                    <div class="list-box" id="list-box" style=" padding-bottom: 30px; ">
                        {volist name="list" id="vo"}
                        {eq name=":filteroffcard($vo['goods_card_id'])" value="true"}
                        <div class="box">
                            <a href="{:url('cardshop/goodsdetail',array('id'=>$vo['id'],'card_id'=>$vo['card_id']))}">
                                <div class="pic-box" style=" background:{notempty name="vo.goods_color"}{$vo.goods_color}{else/}{:getcolor(cardgetinfo($vo['goods_card_id'],1,3))}{/notempty};">
                                    <img class="card-logo" src="{$vo.goods_img}">
                                    <div class="card-box">
                                        <div class="card-title">
                                            {$vo.goods_name}
                                        </div>

                                       
                                    </div>
                                </div>
                                <div class="box-text">
                                    <p class="box-title box-title-name">{notempty name="vo.goods_card_id"}{$vo.goods_card_id|get_cardid_type=###}{else/}红包{/notempty}</p>
                                    <p class="box-title box-title-detail">
                                        <span class="detail-integral">{$vo.goods_price}积分</span>
                                    </p>
                                    <p>
                                    </p>
                                </div>
                            </a>
                        </div>
                        {/eq}
                        {/volist}
                    </div>
                </div>

                <div class="weui-tab__panel" style="display:none;">
                    <div class="weui-panel weui-panel_access">
                        <div class="weui-panel__bd">
                            {volist name="order" id="orvo"}
                            <a href="{:url('carduser/orderinfo', array('id'=>$orvo['id'],'card_id'=>$orvo['card_id']))}" class="weui-media-box weui-media-box_appmsg">
                                <div class="weui-media-box__bd flex2">
                                    <h4 class="weui-media-box__title" style="color:#3e4655;padding: 3px 0">订单:{$orvo.goods_name}</h4>
                                    <p class="weui-media-box__desc" style="padding: 3px 0">{$orvo.create_time}</p>
                                </div>
                                <div class="weui-media-box__bd text-right">-{$orvo.price}积分</div>
                            </a>
                            {/volist}

                        </div>
                    </div>
                </div>
                <div class="weui-navba">
                    <div class="weui-navbar__item weui-bar__item_on">
                        积分兑换
                    </div>
                    <div class="weui-navbar__item">
                        我的记录
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
<script src="__STATIC_URL__/static/js/jquery-2.1.4.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
    wx.config({$share.wxjssdk});
    wx.ready(function(){
        wx.hideAllNonBaseMenuItem();

        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
    });
</script>
<script type="text/javascript">
    $(function() {
        $('.weui-navbar__item').on('click', function() {
            var index = $(this).index();
            $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
            $(".weui-tab__panel").css("display", "none").eq(index).css("display", "block");
        });

    });
</script>

</html>